Day27：實做練習-聯絡方式

2022 iThome 鐵人賽

Modern Web

30天複習網頁前端設計!系列第 27 篇

14th鐵人賽

2022-11-28 11:41:47

1101 瀏覽

分享至

<body>
    <!--header and navbar-->
    <header>
      <nav>
        <ul>
          <li><a href="index.html">首頁</a></li>
          <li><a href="resume.html">個人履歷</a></li>
          <li><a class="active" href="#">聯絡方式</a></li>
          <li><a href="project">網頁成果</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section class="form">
        <form>
          <div>
            <label for="name">姓名:</label>
            <input type="text" name="name" />
          </div>
          <div>
            <label for="email">郵件:</label>
            <input type="email" name="email" />
          </div>
          <div>
            <label for="phone">電話:</label>
            <input type="text" name="phone" />
          </div>
          <div>
            <label for="question">問題詢問:</label>
            <textarea name="question" id="question" rows="8"></textarea>
          </div>
          <br>
          <button type="submit">提交表單</button>
        </form>
      </section>
      <div class="line"></div>
      <section class="contact">
        <div class="content">
          <h2>Tel: 0911222333</h2>
          <h2>Email: a0911222333@gmail.com</h2>
          <h2>其他聯絡方式: 臉書、IG</h2>
        </div>
      </section>
    </main>

    <!--links for facebook, instagram and youtube-->
    <footer>
        <a href="https://www.facebook.com/dogcherrycat"
        ><img src="ICONS\icons8-facebook-circled.svg" alt="facebook" title="facebook page"
      /></a>
      <a href="https://www.instagram.com/5hienu/">
        <img
          src="ICONS\icons8-instagram.svg"
          alt="instagram"
          title="instagram page"
        /></a>
    </footer>
  </body>